<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资讯展示页面</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      width: 1280px;
    }
  </style>
</head>

<body class="bg-gray-50 p-6">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">使用#和平资讯+编号查看资讯详情</h1>
    
     <CHANGE>
    <div class="grid grid-cols-4 gap-6">
      
      {{each list item}}
      <article class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
        <div class="aspect-[3/4] overflow-hidden">
          <img 
            src="{{item.sImageAbbrAddrMiddle}}" 
            alt="资讯封面" 
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
          />
        </div>
        
        <div class="p-4">
          <h2 class="text-lg font-semibold text-gray-900 mb-3 line-clamp-2">
            {{item.sTitle}}
          </h2>
          
          <div class="flex items-center justify-between text-sm text-gray-500">
            <div class="flex items-center gap-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
              <span>{{item.views}}</span>
            </div>
            <div class="flex items-center gap-1">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span>{{item.dtReleaseTime}}</span>
            </div>
          </div>
        </div>
      </article>
      {{/each}}
      
    </div>
  </div>
</body>
</html>